<script setup>
  import {useRouter} from "vue-router";
  import {reactive, ref} from "vue";
  import {ElMessage} from "element-plus";
  import uu from "@/util/uu";

  const data = reactive({
    user:{},
    url:'http://localhost:8080/verify'
    //url:'http://localhost:8000/verify'
  })
  //成功处理 路由跳转
  const router = useRouter();
  //校验
  const ruleFormRef = ref();

  const rules = reactive({
    userName: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 3, max: 18, message: '账号长度必须是3~18位之间', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    code:[
      { required: true, message: '请输入验证码', trigger: 'blur' }
    ],
  })


  const login = (ruleFormRef) => {

    ruleFormRef.validate((valid, fields) => {
      if (valid) {
        // 清除tooken
        sessionStorage.clear()
        if (sessionStorage.getItem("token") == null){
          uu.post('/user/login',data.user).then(res => {
            console.log(res)
            if(res.ok){
              ElMessage({
                message: res.message,
                type: 'success',
              })
              //存储数据
              //localStorage.setItem("token",res.data) // 存储到cookie
              sessionStorage.setItem("token",res.data) // 存储到session
              router.push('/layout')
            }else{
              ElMessage.error(res.message)
            }
          })
        }else {
          ElMessage({
            message: "登录成功 ",
            type: 'success',
          })
          router.push("/layout")
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }



  //切换验证码
  const changeImg = () => {
    data.url = data.url + "?" +Math.random()
  }
</script>

<template>
  <!-- 在vue页面中，template下第一个标签使用div -->
  <div class="box">
    <div class="login-box">
      <div class="title">阳光农业互助保险管理系统</div>
      <!--  表单    -->
      <div>
        <el-form
            ref="ruleFormRef"
            label-width="100px"
            :model="data.user"
            style="margin-top: 40px"
            :rules="rules"
        >
          <el-form-item label="账号" size="large" prop="userName">
            <el-input v-model="data.user.userName" size="large" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="密码" size="large" prop="password">
            <el-input type="password" v-model="data.user.password" size="large" style="width: 300px"/>
          </el-form-item>
          <el-form-item label="验证码" size="large" prop="code">
            <el-input v-model="data.user.code" style="width: 100px;" size="large"/>
            <img :src="data.url" alt=""   style="height: 38px;margin-left: 10px">
            <span style="margin-left: 10px;cursor: pointer" @click="changeImg">换一个</span>
          </el-form-item>
          <el-button type="success" @click="login(ruleFormRef)" size="large">点击登录</el-button>
        </el-form>
        <br>

      </div>
    </div>
  </div>
</template>

<style scoped>
.box{
  background-color: darkcyan;
  width: 100%;
  height: 100vh;  /*自适应高度*/
  /* 通过flex布局进行上下居中 */
  display: flex;
  align-items: center;  /* 上下居中 */
  justify-content: center; /* 左右居中 */
  background-image: url("../assets/img/R-C.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
}
.login-box{
  width: 450px;
  height: 350px;
  background:rgba(0,0,0,0.6);
  color: #ffffff;
  padding: 10px;
  /*margin: 0 auto;*/
  text-align: center;
}
.title{
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #ffffff;
  font-size: 25px;
  line-height: 50px;
  font-weight: bold;
}
/deep/ .el-form-item__label{
  color: white;
}
</style>